<template>
  <div class="login-form">
    <div class="g-form">
      <div class="g-form-line">
        <span class="g-form-label">用户名：</span>
        <div class="g-form-input">
          <input type="text" v-model="usernameModel"
          placeholder="请输入用户名">
        </div>
        <span class="g-form-error">{{ userErrors.errorText }}</span>
      </div>
      <div class="g-form-line">
        <span class="g-form-label">密码：</span>
        <div class="g-form-input">
          <input type="password" 
          v-model="passWordModel" placeholder="请输入密码">
        </div>
        <span class="g-form-error">{{ passwordErrors.errorText }}</span>
      </div>
      <div class="g-form-line">
        <div class="g-form-btn" @click="onLogin">
          <a class="button">登录</a>
        </div>
      </div>
      <p>{{ errorText }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      usernameModel: "",
      passWordModel: "",
      errorText: ""
    };
  },
  computed: {
    userErrors() {
      let errorText, status;
      if (!/@/g.test(this.usernameModel)) {
        status = false;
        errorText = "不包含@";
      } else {
        status = true;
        errorText = "";
      }
      if(!this.userFlag){
        errorText = '';
        this.userFlag = true;
      }
      return {
        status,
        errorText
      };
    },
    passwordErrors(){
      let errorText, status;
      if (!/^\w{1,6}$/g.test(this.passWordModel)) {
        status = false;
        errorText = "密码不是1-6位";
      } else {
        status = true;
        errorText = "";
      }
       if(!this.passFlag){
        errorText = '';
        this.passFlag = true;
      }
      return {
        status,
        errorText
      };
    }
  },
  methods: {
    onLogin() {
      if(!this.userErrors.status || !this.passwordErrors.status){
        this.errorText = '部分选项未通过';
      }else{
        this.errorText = '';
        // this.axios.post('api/login')
        //   .then((res) => {
        //     console.log(res.data);
        //     this.$emit('has-log', res.data)
        //   }, (error) => {
        //     console.log(error);
        //   })
        
        this.$emit('has-log', this.usernameModel, this.passwordModel);

      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
